<template>
  <a-modal
    :title="title"
    :width="width"
    :visible="visible"
    :confirmLoading="confirmLoading"
    @ok="handleOk"
    @cancel="handleCancel"
    cancelText="关闭"
  >
    <a-spin :spinning="confirmLoading">
      <a-form
        ref="formRef"
        :model="formState"
        :rules="validatorRules"
        :label-col="labelCol"
        :wrapper-col="wrapperCol"
      >
        <a-form-item
          label="成品货号"
          :labelCol="labelCol"
          :wrapperCol="wrapperCol"
        >
          <a-input
            type="text"
            name="productCode"
            class="disabled-input"
            v-model:value="formState.productCode"
            placeholder="请输入成品货号"
          ></a-input>
        </a-form-item>
        <a-form-item
          label="成品SKU"
          :labelCol="labelCol"
          :wrapperCol="wrapperCol"
        >
          <a-input
            type="text"
            name="productSku"
            class="disabled-input"
            v-model:value="formState.productSku"
            placeholder="请输入成品SKU"
          ></a-input>
        </a-form-item>

        <a-form-item
          label="出库数量"
          :labelCol="labelCol"
          :wrapperCol="wrapperCol"
        >
          <a-input
            type="number"
            name="outboundQuantity"
            v-model:value="formState.outboundQuantity"
            placeholder="请输入出库数量"
          ></a-input>
        </a-form-item>
        <a-form-item label="备注" :labelCol="labelCol" :wrapperCol="wrapperCol">
          <a-input
            type="text"
            name="remark"
            v-model:value="formState.remark"
            placeholder="请输入备注"
          ></a-input>
        </a-form-item>
      </a-form>
    </a-spin>
  </a-modal>
</template>

<script setup>
import {
  ref,
  reactive,
  nextTick,
  defineComponent,
  onMounted,
  toRaw,
} from "vue";
import { pick } from "lodash-es"; // 确保你已经安装了 lodash-es
import { message } from "ant-design-vue";
import { AddProductOutput } from "../../wailsjs/go/controller/ProductManagement";

const formRef = ref();
const visible = ref(false);
const formState = reactive({
  id: 0,
  productCode: "",
  productSku: "",
  outboundQuantity: "",
  remark: "",
});
const title = "操作";
const width = 800;
const confirmLoading = ref(false);
const labelCol = {
  xs: { span: 24 },
  sm: { span: 5 },
};

const wrapperCol = {
  xs: { span: 24 },
  sm: { span: 16 },
};

const validatorRules = reactive({
  productCode: { rules: [] },
  productSku: { rules: [] },
  outboundQuantity: { rules: [] },
  remark: { rules: [] },
});

onMounted(() => {
  nextTick(() => {
    console.log("挂在组件");
    console.log(formRef);
  });
});

// 定义方法
const add = (record) => {
  formState.id = record.id || 0;
  formState.productCode = record.productCode || "";
  formState.productSku = record.productSku || "";
  formState.outboundQuantity = record.outboundQuantity || "";
  formState.remark = record.remark || "";
  visible.value = true;
};

const close = () => {
  visible.value = false;
  // 触发父组件的 close 事件
  // 假设父组件监听了 "close" 事件
};

const handleOk = () => {
  // 处理确认按钮的逻辑
  console.log("formState :");
  console.log(toRaw(formState));
  AddProductOutput(toRaw(formState)).then((res) => {
    if (res["code"] == 200) {
      message.success(res["message"]);
    } else {
      message.error(res["message"]);
    }
    handleCancel();
  });
};

const handleCancel = () => {
  close();
};

const popupCallback = (row) => {};

// 导出模板中需要用到的方法和数据
defineExpose({
  popupCallback,
  add,
});
</script>

<style scoped>
.disabled-input {
  pointer-events: none;
  background-color: #f5f5f5;
}
</style>
